<template>
	<div class="details-container">
		<div class="details-header">
			<!-- 左侧：房源图片 -->
			<div class="details-left">
				<!-- 主图片 -->
				<div class="main-image-container">
					<img :src="house?.imageUrls[currentIndex]" alt="主图片" class="main-image" @click="openModal" />
				</div>
				<!-- 缩略图轮播 -->
				<div class="thumbnail-carousel">
					<!-- 左按钮 -->
					<button class="arrow-button left" @click="prevImage">
						<img src="@/assets/left.png" alt="上一张" class="arrow-icon" />
					</button>
					<!-- 缩略图容器 -->
					<div class="thumbnails" ref="thumbnailContainer">
						<div
							v-for="(image, index) in house?.imageUrls"
							:key="index"
							class="thumbnail-item"
							:class="{ active: index === currentIndex }"
							@click="updateImage(index)"
						>
							<img :src="image" alt="缩略图" class="thumbnail-image" />
						</div>
					</div>
					<!-- 右按钮 -->
					<button class="arrow-button right" @click="nextImage">
						<img src="@/assets/right.png" alt="下一张" class="arrow-icon" />
					</button>
				</div>
				<!-- 放大图片模态框 -->
				<div v-if="isModalVisible" class="simple-modal">
					<!-- 左箭头 -->
					<div class="arrow left" @click="prevImage">
						<img src="@/assets/left-big.png" alt="上一张" />
					</div>
					<!-- 图片 -->
					<img :src="house.imageUrls[currentIndex]" alt="放大图片" class="modal-image" />
					<!-- 右箭头 -->
					<div class="arrow right" @click="nextImage">
						<img src="@/assets/right-big.png" alt="下一张" />
					</div>
					<!-- 关闭按钮 -->
					<div class="close-button" @click="closeModal">
						<img src="@/assets/close.png" alt="close" />
					</div>
				</div>
			</div>

			<!-- 右侧：房源信息 -->
			<div class="details-right">
				<text class="details-title">{{ house.title }}</text>
				<div class="details-style">
					<text class="details-subtitle">
						<span class="info-label">所属小区：</span>
						<span class="info-value">{{ house.community }}</span>
					</text>
					<text class="details-subtitle">
						<span class="info-label">所属商圈：</span>
						<span class="info-value">{{ house.businessArea }}</span>
					</text>
					<text class="details-subtitle">
						<span class="info-label">附近地铁站：</span>
						<span class="info-value">{{ house.subwayStation }}</span>
					</text>
					<div class="info-group">
						<span class="info-label">房型：</span>
						<span class="info-value"> {{ house.houseType === '1房0厅1卫' ? '单间' : house.houseType }} </span>
					</div>
					<div class="info-group">
						<span class="info-label">面积：</span>
						<span class="info-value">{{ house.area }}㎡</span>
					</div>
					<div class="info-group">
						<span class="info-label">楼层：</span>
						<span class="info-value">{{ house.floor }}楼</span>
					</div>
					<div class="info-group">
						<span class="info-label">租金：</span>
						<span class="info-value price">￥{{ house.price }}/月</span>
					</div>
					<div class="info-group">
						<span class="info-label">租期：</span>
						<span class="info-value price">{{ house.lease }}</span>
					</div>
					<div class="info-group">
						<span class="info-label">支付方式：</span>
						<span class="info-value price">{{ house.payType }}</span>
					</div>
					<div class="info-group">
						<span class="info-label">交通：</span>
						<span class="info-value price">距{{ house.subwayStation }}地铁站步行{{ house.traffic }}分钟</span>
					</div>
				</div>
				<!-- 添加房东信息容器 -->
				<div class="landlord-info-container">
					<div class="landlord-info">
						<div class="landlord-details-left" @mouseover="showLandlordInfo = true">
							<img :src="landlord.logo" alt="房东头像" class="logo" />
							<div class="landlord-details">
								<text>{{ landlord.username }}</text>
								<text>{{ landlord.phone }}</text>
							</div>
						</div>
						<text class="contact-info" @click="goToChat">在线聊天</text>
					</div>
					<!-- 预约看房按钮 -->
					<a-button type="primary" @click="showReservationModal" style="margin-top: 1rem">预约看房</a-button>
				</div>
				<!-- 房东信息气泡框 -->
				<div v-if="showLandlordInfo" class="landlord-info-bubble" @mouseleave="showLandlordInfo = false">
					<div class="bubble-logo">
						<img :src="landlord.logo" alt="房东头像" class="bubble-logo-img" />
					</div>
					<div class="bubble-info">
						<p><strong>姓名:</strong> {{ landlord.username }}</p>
						<p><strong>性别:</strong> {{ landlord.gender === 'male' ? '男' : '女' }}</p>
						<p><strong>电话:</strong> {{ landlord.phone }}</p>
						<p><strong>邮箱:</strong> {{ landlord.email }}</p>
					</div>
				</div>

				<!-- 预约模态框 -->
				<a-modal v-model:visible="isReservationModalVisible" :title="modalTitle" :footer="null" centered width="400px">
					<!-- 第一步：选择日期 -->
					<div v-if="reservationStep === 1">
						<div class="date-list">
							<a-button
								v-for="(date, index) in availableDates"
								:key="index"
								style="margin: 5px"
								@click="selectDate(date)"
								:type="selectedDate === date ? 'primary' : 'default'"
							>
								{{ formatDate(date) }}
							</a-button>
						</div>
					</div>
					<!-- 第二步：选择具体时段 -->
					<div v-else-if="reservationStep === 2">
						<div class="time-slot-list" style="display: flex; flex-wrap: wrap; justify-content: center">
							<a-button
								v-for="(slot, index) in availableTimeSlots"
								:key="index"
								:disabled="slot.status !== 'available'"
								:type="selectedSchedule && selectedSchedule.id === slot.id ? 'primary' : 'default'"
								style="margin: 5px"
								@click="selectTimeSlot(slot)"
							>
								{{ slot.startTime }} - {{ slot.endTime }}
							</a-button>
						</div>
						<div style="text-align: center; margin-top: 20px">
							<a-button @click="backToStep1" style="margin-right: 10px">返回</a-button>
							<a-button type="primary" @click="confirmReservation">确定</a-button>
						</div>
					</div>
				</a-modal>
			</div>
		</div>

		<!-- 房源描述 -->
		<div class="details-bottom">
			<div>
				<h2 class="section-title">房源描述</h2>
				<hr class="title-hr" />
				<p>{{ house.description }}</p>
			</div>

			<!-- 配套设施 -->
			<div>
				<h2 class="section-title">配套设施</h2>
				<hr class="title-hr" />
			</div>
			<div class="facility-container">
				<div
					v-for="facility in allFacilities"
					:key="facility.name"
					class="facility-item"
					:class="{ 'no-facility': facility.status.startsWith('no-') }"
				>
					<span class="facility-icon" :class="[`facility-${facility.name}`, facility.status]"></span>
					<p class="facility-text">{{ facility.label }}</p>
				</div>
			</div>

			<!-- 高德地图展示 -->
			<div class="details-map">
				<div>
					<h2 class="section-title">周边信息</h2>
					<hr class="title-hr" />
				</div>
				<!-- 使用高德地图渲染容器 -->
				<div ref="mapRef" class="map"></div>
			</div>
		</div>

		<!-- 猜你喜欢 -->
		<h2 class="section-title">猜你喜欢</h2>
		<hr class="title-hr" />
		<GuessYouLike />

		<!-- 收藏按钮-->
		<a-float-button @click="handleClick" type="primary" description="收藏" />
	</div>
</template>

<script>
	import { message, Modal } from 'ant-design-vue';
	import userApi from '@/api/userApi';
	import landlordApi from '@/api/landlordApi';
	import dayjs from 'dayjs';
	import GuessYouLike from '@/components/GuessYouLike.vue';
	import AMapLoader from '@amap/amap-jsapi-loader';

	export default {
		components: { GuessYouLike },
		data() {
			return {
				userId: localStorage.getItem('id'),
				house: {
					imageUrls: [],
					title: '',
					businessArea: '',
					subwayStation: '',
					houseType: '',
					area: '',
					floor: '',
					price: '',
					description: '',
					facilities: '',
					latitude: null,
					longitude: null,
					lease: '',
					payType: '',
					traffic: ''
				},
				center: { lng: 113.34451, lat: 23.1934 },
				allFacilities: [
					{ name: 'bed', label: '床', status: '' },
					{ name: 'kitchen', label: '厨房', status: '' },
					{ name: 'heater', label: '热水器', status: '' },
					{ name: 'air', label: '空调', status: '' },
					{ name: 'wifi', label: '网络', status: '' },
					{ name: 'tv', label: '电视', status: '' },
					{ name: 'fridge', label: '冰箱', status: '' },
					{ name: 'washer', label: '洗衣机', status: '' },
					{ name: 'wardrobe', label: '衣柜', status: '' },
					{ name: 'elevator', label: '电梯', status: '' }
				],
				selectedFacilities: [],
				currentIndex: 0,
				isModalVisible: false,
				showLandlordInfo: false,
				landlord: {
					id: '',
					logo: '',
					username: '',
					gender: '',
					phone: '',
					email: ''
				},
				appointmentDate: null,
				isFavorite: false,
				role: localStorage.getItem('role'),
				// 高德地图相关
				mapIns: null,
				mapMarker: null,
				AMAP_KEY: import.meta.env.VITE_AMAP_KEY,
				SECURITY_KEY: import.meta.env.VITE_SECURITY_KEY,
				// 预约模态框相关数据
				isReservationModalVisible: false,
				reservationStep: 1, // 1：选择日期；2：选择时段
				landlordSchedules: [], // 后端返回的该房东未来七天档期数组
				selectedDate: null, // 用户选中的日期（格式：YYYY-MM-DD）
				selectedSchedule: null // 用户选中的具体档期对象
			};
		},
		created() {
			const houseId = this.$route.params.houseId;
			this.getHouseDetails(houseId);
			this.getLandlordInfo(houseId);
			// 每隔 120 秒刷新房源详情
			this.refreshInterval = setInterval(() => {
				this.getHouseDetails(houseId);
			}, 120000);
		},
		beforeDestroy() {
			if (this.refreshInterval) {
				clearInterval(this.refreshInterval);
			}
		},
		mounted() {
			// 高德地图安全配置（如果需要）
			window._AMapSecurityConfig = {
				securityJsCode: import.meta.env.VITE_SECURITY_JSCODE
			};
			// 渲染地图
			this.renderMap();
		},
		computed: {
			// 模态框标题根据步骤变化
			modalTitle() {
				return this.reservationStep === 1 ? '选择看房日期' : '选择具体时段';
			},
			// 从返回的档期数据中提取唯一日期（假设 scheduleDate 格式为 "YYYY-MM-DD"）
			availableDates() {
				const datesSet = new Set();
				this.landlordSchedules.forEach((schedule) => {
					datesSet.add(schedule.scheduleDate);
				});
				return Array.from(datesSet);
			},
			// 根据选中的日期过滤出当天的所有时段
			availableTimeSlots() {
				if (!this.selectedDate) return [];
				return this.landlordSchedules.filter((schedule) => schedule.scheduleDate === this.selectedDate);
			}
		},
		methods: {
			formatDate(date) {
				// 假设 date 为字符串或 Date 对象，统一显示为 YYYY-MM-DD 格式
				return dayjs(date).format('YYYY-MM-DD');
			},
			// 显示预约模态框时，先获取房东的未来七天档期数据
			showReservationModal() {
				if (!localStorage.getItem('id')) {
					message.warn('请先登录');
					return;
				}
				if (this.role === 'landlord') {
					message.warn('房东不支持该功能');
					return;
				}
				// 重置预约步骤和已选数据
				this.reservationStep = 1;
				this.selectedDate = null;
				this.selectedSchedule = null;
				userApi
					.getLandlordSchedules(this.landlord.id)
					.then((res) => {
						if (res.code === 200) {
							this.landlordSchedules = res.data;
						} else {
							message.error('获取档期失败');
						}
					})
					.catch((err) => {
						console.error('获取档期失败:', err);
						message.error('获取档期失败');
					});
				this.isReservationModalVisible = true;
			},
			// 用户选择日期后进入第二步
			selectDate(date) {
				this.selectedDate = date;
				this.reservationStep = 2;
			},
			// 返回第一步
			backToStep1() {
				this.reservationStep = 1;
			},
			// 选择具体时段
			selectTimeSlot(slot) {
				this.selectedSchedule = slot;
			},
			// 确认预约，将选择的档期提交给后端
			confirmReservation() {
				if (!this.selectedSchedule) {
					message.error('请选择具体时段');
					return;
				}

				Modal.confirm({
					title: '确认预约吗？',
					okText: '确定',
					cancelText: '取消',
					onOk: () => {
						const data = {
							userId: this.userId,
							houseId: this.$route.params.houseId,
							scheduleId: this.selectedSchedule.id
						};
						userApi
							.reserveHouse(data)
							.then((res) => {
								if (res.code === 200) {
									message.success('预约成功');
								} else {
									message.error(res.message);
								}
								this.isReservationModalVisible = false;
							})
							.catch((err) => {
								console.error('预约失败:', err);
								message.error('预约失败');
							});
					}
				})

			},

			dayjs,
			getHouseDetails(houseId) {
				// 获取房源详情及更新相关信息
				if (this.role === 'user') {
					userApi
						.getHouseById(houseId, this.userId)
						.then((res) => {
							this.house = res.data;
							this.selectedFacilities = res.data.facilities.split(',');
							this.allFacilities.forEach((facility) => {
								facility.status = this.selectedFacilities.includes(facility.label)
									? `has-${facility.name}`
									: `no-${facility.name}`;
							});
							this.house.latitude = res.data.latitude;
							this.house.longitude = res.data.longitude;
							this.center = { lng: this.house.longitude, lat: this.house.latitude };
						})
						.catch((err) => {
							console.error('加载房源详情失败:', err);
						});
				} else {
					landlordApi
						.getHouseByIdLandlord(houseId)
						.then((res) => {
							this.house = res.data;
							this.selectedFacilities = res.data.facilities.split(',');
							this.allFacilities.forEach((facility) => {
								facility.status = this.selectedFacilities.includes(facility.label)
									? `has-${facility.name}`
									: `no-${facility.name}`;
							});
							this.house.latitude = res.data.latitude;
							this.house.longitude = res.data.longitude;
							this.center = { lng: this.house.longitude, lat: this.house.latitude };
						})
						.catch((err) => {
							console.error('加载房源详情失败:', err);
						});
				}
			},
			getLandlordInfo(houseId) {
				landlordApi
					.getLandlordInfoByHouseId(houseId)
					.then((res) => {
						this.landlord = res.data;
					})
					.catch((err) => {
						console.error('获取房东信息失败:', err);
					});
			},
			openModal() {
				this.isModalVisible = true;
			},
			closeModal() {
				this.isModalVisible = false;
			},
			prevImage() {
				this.currentIndex = (this.currentIndex - 1 + this.house.imageUrls.length) % this.house.imageUrls.length;
				this.scrollToCurrentThumbnail();
			},
			nextImage() {
				this.currentIndex = (this.currentIndex + 1) % this.house.imageUrls.length;
				this.scrollToCurrentThumbnail();
			},
			updateImage(index) {
				this.currentIndex = index;
				this.scrollToCurrentThumbnail();
			},
			scrollToCurrentThumbnail() {
				const container = this.$refs.thumbnailContainer;
				const activeThumbnail = container.children[this.currentIndex];
				if (activeThumbnail) {
					const offsetLeft = activeThumbnail.offsetLeft;
					const containerWidth = container.clientWidth;
					const thumbnailWidth = activeThumbnail.clientWidth;
					container.scrollTo({
						left: offsetLeft - containerWidth / 2 + thumbnailWidth / 2,
						behavior: 'smooth'
					});
				}
			},
			handleClick() {
				if (!localStorage.getItem('id') || !localStorage.getItem('name') || !localStorage.getItem('satoken')) {
					message.warn('请先登录');
					return;
				}
				if (this.role === 'landlord') {
					message.warn('房东不支持该功能');
					return;
				}
				const houseId = this.$route.params.houseId;
				if (this.isFavorite) {
					userApi
						.removeFavorite(houseId)
						.then(() => {
							message.warn('已取消收藏');
						})
						.catch(() => {
							console.error('取消收藏失败');
						});
				} else {
					userApi
						.addFavorite(houseId)
						.then(() => {
							message.success('收藏成功');
						})
						.catch(() => {
							console.error('收藏失败');
						});
				}
				this.isFavorite = !this.isFavorite;
			},
			goToChat() {
				if (this.role === 'landlord') {
					message.warn('房东不支持该功能');
					return;
				}
				if (!localStorage.getItem('id') || !localStorage.getItem('name') || !localStorage.getItem('satoken')) {
					message.warn('请先登录');
					return;
				}
				const data = {
					senderId: this.userId,
					receiverId: this.landlord.id,
					houseId: this.$route.params.houseId
				};
				userApi
					.createConversation(data)
					.then((res) => {
						window.open('/user-chat/' + res.data.id, '_blank');
					})
					.catch((err) => {
						console.error('创建会话失败', err);
					});
			},
			async loadAMap() {
				try {
					const AMap = await AMapLoader.load({
						key: this.AMAP_KEY,
						version: '2.0',
						securityJsCode: this.SECURITY_KEY,
						plugins: ['AMap.Geocoder', 'AMap.Marker']
					});
					return AMap;
				} catch (error) {
					console.error('AMap 加载失败', error);
					return null;
				}
			},
			renderMap() {
				this.loadAMap()
					.then((AMap) => {
						if (!AMap) return;
						// 使用完整地址或默认地址进行解析
						const resolvedAddress = this.house.address
							? this.house.region + this.house.address
							: '广州市花都区花都广场';
						const geocoder = new AMap.Geocoder({
							city: '020',
							radius: 500
						});
						geocoder.getLocation(resolvedAddress, (status, result) => {
							if (status === 'complete' && result.geocodes.length) {
								const { lng, lat } = result.geocodes[0].location;
								// 初始化地图
								this.mapIns = new AMap.Map(this.$refs.mapRef, {
									zoom: 19,
									center: [lng, lat],
									resizeEnable: true
								});
								// 添加标记
								this.mapMarker = new AMap.Marker({
									position: [lng, lat],
									map: this.mapIns
								});
								// 更新 center 数据
								this.center = { lng, lat };
								// 点击地图更新标记位置和经纬度
								this.mapIns.on('click', (e) => {
									const { lng, lat } = e.lnglat;
									this.mapMarker.setPosition([lng, lat]);
									this.center = { lng, lat };
									console.log(`用户点击地图：经度 ${lng}, 纬度 ${lat}`);
								});
							} else {
								console.error('地址解析失败，使用默认中心');
								this.mapIns = new AMap.Map(this.$refs.mapRef, {
									zoom: 19,
									center: [113.122717, 23.028762],
									resizeEnable: true
								});
							}
						});
					})
					.catch((e) => {
						console.error('地图加载失败', e);
					});
			}
		}
	};
</script>

<style scoped>
	.details-container {
		display: flex;
		flex-direction: column;
		max-width: 1200px;
		margin: 1rem auto;
	}

	.details-header {
		display: flex;
		flex-direction: row;
	}

	.details-left,
	.details-right {
		display: inline-block;
		vertical-align: top;
	}

	.details-left {
		width: 60%;
		margin-right: 2rem;
	}

	.details-right {
		width: 38%;
	}

	.main-image {
		width: 100%;
		height: 460px;
		object-fit: cover;
		cursor: pointer;
	}

	.thumbnail-carousel {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		margin-top: 10px;
	}

	.arrow-button {
		background: white;
		border: 1px solid #f2f2f6;
		cursor: pointer;
		position: absolute;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}

	.arrow-button.left {
		left: -3px;
	}

	.arrow-button.right {
		right: -3px;
	}

	.thumbnails {
		display: flex;
		overflow-x: hidden;
		gap: 1rem;
		align-items: center;
		height: 100%;
	}

	.thumbnail-item {
		border: 1px solid transparent;
		cursor: pointer;
		height: 100%;
		display: flex;
		align-items: center;
	}

	.thumbnail-item.active {
		border-color: #e55a00;
	}

	.thumbnail-image {
		width: 120px;
		height: 80px;
		object-fit: cover;
	}

	.simple-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 1000;
	}

	.modal-image {
		width: auto;
		height: 80%;
		object-fit: contain;
		max-width: 100%;
	}

	.arrow {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.arrow.left {
		left: 20px;
	}

	.arrow.right {
		right: 20px;
	}

	.arrow img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.close-button {
		position: absolute;
		top: 20px;
		right: 20px;
		color: white;
		cursor: pointer;
		background: none;
		border: none;
		line-height: 1;
	}

	.details-title {
		font-size: 28px;
		margin-bottom: 10px;
		color: #323030;
	}

	.details-subtitle {
		font-size: 16px;
		color: #888;
	}

	.details-info {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.info-label {
		font-weight: bold;
		color: #555;
	}

	.info-value.price {
		color: #e55a00;
		font-weight: bold;
	}

	.details-bottom {
		margin-top: 20px;
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.section-title {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 10px;
		color: #555;
	}

	.facility-container {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
		gap: 22px;
		list-style: none;
		padding: 0;
		justify-items: center;
		align-items: center;
		max-width: 1200px;
		margin: 0 auto;
	}

	.facility-item {
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.facility-icon {
		position: relative;
		display: inline-block;
		width: 60px;
		height: 60px;
	}

	.facility-icon::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url('/src/assets/icons.png');
		background-repeat: no-repeat;
		background-size: 140px 990px;
	}

	.facility-item .facility-text {
		text-decoration: none;
	}

	.facility-item.no-facility .facility-text {
		text-decoration: line-through;
	}

	.facility-icon::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 60px;
		height: 60px;
		background-image: url('/src/assets/icons.png');
		background-repeat: no-repeat;
		background-size: 140px 990px;
	}

	.facility-bed.has-bed::before {
		background-position: 0 -140px;
	}

	.facility-bed.no-bed::before {
		background-position: -70px -140px;
	}

	.facility-kitchen.has-kitchen::before {
		background-position: 0 -70px;
	}

	.facility-kitchen.no-kitchen::before {
		background-position: -70px -70px;
	}

	.facility-heater.has-heater::before {
		background-position: 0 -560px;
	}

	.facility-heater.no-heater::before {
		background-position: -70px -560px;
	}

	.facility-air.has-air::before {
		background-position: 0 -490px;
	}

	.facility-air.no-air::before {
		background-position: -70px -490px;
	}

	.facility-wifi.has-wifi::before {
		background-position: 0 -700px;
	}

	.facility-wifi.no-wifi::before {
		background-position: -70px -700px;
	}

	.facility-tv.has-tv::before {
		background-position: 0 -280px;
	}

	.facility-tv.no-tv::before {
		background-position: -70px -280px;
	}

	.facility-fridge.has-fridge::before {
		background-position: 0 0;
	}

	.facility-fridge.no-fridge::before {
		background-position: -70px 0;
	}

	.facility-washer.has-washer::before {
		background-position: 0 -770px;
	}

	.facility-washer.no-washer::before {
		background-position: -70px -770px;
	}

	.facility-wardrobe.has-wardrobe::before {
		background-position: 0 -840px;
	}

	.facility-wardrobe.no-wardrobe::before {
		background-position: -70px -840px;
	}

	.facility-elevator.has-elevator::before {
		background-position: 0 -350px;
	}

	.facility-elevator.no-elevator::before {
		background-position: -70px -350px;
	}

	.details-map {
		display: flex;
		flex-direction: column;
	}

	.map {
		width: 100%;
		height: 400px;
		border: #d4d5d6 1px solid;
	}

	.title-hr {
		border: none;
		border-top: 1px solid #ccc;
		margin: 15px 0;
	}

	.landlord-info-container {
		display: flex;
		flex-direction: column;
		margin-top: 0.5rem;
	}

	.landlord-info {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.contact-info {
		cursor: pointer;
		color: #129df1;
	}

	.landlord-details {
		margin-left: 1rem;
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.landlord-details-left {
		display: flex;
		align-items: center;
		cursor: pointer;
		position: relative;
	}

	.landlord-details {
		display: flex;
		flex-direction: column;
	}

	.landlord-info-bubble {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 63vh;
		left: 58vw;
		width: 250px;
		background-color: #fff;
		border: 1px solid #ccc;
		border-radius: 8px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		z-index: 10;
		align-items: center;
		justify-content: center;
		gap: 1rem;
		padding: 1rem;
	}

	.bubble-logo {
		width: 60px;
		height: 60px;
	}

	.bubble-logo-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.bubble-info p {
		font-size: 15px;
		margin: 5px 0;
	}

	.bubble-info strong {
		font-weight: bold;
	}

	.guess-cards {
		display: flex;
		flex-direction: row;
		gap: 1rem;
		width: 400px;
	}

	.guess-card {
		width: 400px;
		border: 1px solid #ddd;
		background-color: #fff;
		overflow: hidden;
		position: relative;
	}

	.house-image {
		width: 100%;
		height: 250px;
		object-fit: cover;
		cursor: pointer;
	}

	.house-info {
		padding: 1rem;
		text-align: left;
	}

	.house-title {
		font-size: 1rem;
		font-weight: bold;
		margin: 0;
		color: #333;
	}

	.house-title .title-text:hover {
		color: #f14a26;
		cursor: pointer;
	}

	.house-details {
		font-size: 0.85rem;
		color: #777;
		margin: 0.5rem 0 0;
		display: flex;
		gap: 0.5rem;
	}

	.house-details span {
		cursor: pointer;
		color: #777;
	}

	.house-details span:hover {
		color: #ff6a00;
	}

	.details-style {
		background: #f3f3f3;
		padding: 1rem;
		display: flex;
		flex-direction: column;
		gap: 0.8rem;
		margin-top: 1rem;
	}

	.date-list {
		display: flex;
		flex-wrap: wrap;
	}
</style>
